<template style="height: 100%;">
    <!-- lx 2023年4月3日08:29:25 -->
      <!-- 首页点击限时抢购跳转的限时抢购商品展示页面 -->
      <el-container>
        <div id="seckillView"  style="width:80%;height: 100%;margin:0 auto">
            <div style="width: 100%;margin:0 auto">
                <!-- 限时秒杀头部 -->
                <div  style="width: 100%;">
                    <p style="text-align: center;color:black;font-size:40px;font-family: '楷体';font-weight: bold;">限时秒杀</p>
					<el-button @click="seckillOverTime" v-show="false">111</el-button>
                </div>
                <el-row>
                </el-row>
                <div  style="width: 100%;margin:0 auto">
                  <el-row class="cardcenter">
                    <!-- 限时秒杀商品栏 -->
                    <el-col :span="5" v-for="item,index in seckillAllList" :key="index" style="width:23%;height:450px;background:white;float:left;margin-left: 20px;margin-top: 5px;position: relative;" @click="ASeckill(o)">
                        <!-- 倒计时组件 -->
                        <CountDown1
                            v-on:start_callback="countDownS_cb(1)"
                            v-on:end_callback="countDownE_cb(1)"
                            :startTime=item.seckillStartDate
                            :endTime=item.seckillEndDate
                            :dayTxt="'天'"
                            :hourTxt="'小时'"
                            :minutesTxt="'分钟'"
                            :secondsTxt="'秒'" 
                            class="Countdown">
                        </CountDown1>
                        <!-- <el-avatar
                            shape='square'
                            :size='180'
                            fit='fill'
                            :src='item.productFirst'
                            style="margin-top:20px;border-radius:30px;margin-left: 85px;"
                        ></el-avatar> -->
                        <img :src="'http://101.43.223.224:8765/image/getImageById?id='+item.imageId.split(',')[0]" class="image" style="margin-top:20px;border-radius:30px;margin-left: 65px;width:190px;height:190px"/>
                        <div style="margin-top: 10px;">
                          <p class="commodityName">{{item.commodityName}}</p>
                          <p class="seckillPrice">￥{{item.seckillPrice}}</p>
                          <p class="back">{{item.back}}</p>
                          <p class="seckillStock">剩余：{{item.seckillStock}}  件</p>
                          <div class="bottom clearfix">
                            <el-button type="text" class="but" @click="SeckilMainList(item.id)"
                              ><i
                                class="el-icon-caret-right"
                                style="margin-right: 10px"
                              ></i
                              >立即查看</el-button
                            >
                          </div>
                        </div>
                    </el-col>
                </el-row>
                </div>
            </div>
          
        </div>
      </el-container>
  </template>
  
<script>
import router from '@/router';
import CountDown1 from 'vue2-countdown';
export default {
	template: "seckillView",
    components: {
		// 限时抢购倒计时组件
		CountDown1
	},
	data() {
		return {
			// 限时抢购商品信息
			seckillAllList: [],
		};
	},
	mounted() {
		// 首页展示限时抢购商品
			this.getSeckillAllList()
	},
	methods: {
		// 抢购商品列表跳转到抢购商品详情
		SeckilMainList(id) {
			this.$router.push({
				path:'/PageMain',
				query:{
					id:id
				}
			})
		},
		//   时间倒计时方法
		countDownS_cb: function (x) { // 开始倒计时进行的回调
		// console.log(x, '开始')
		},
		//   时间倒计时方法
		countDownE_cb: function (x) { // 倒计时结束进行的回调
			// this.$message.error("考试时间到，试卷自动提交");
			// console.log(x, '结束')
			this.getSeckillAllList()
		},
		// 获取首页显示抢购商品信息
		getSeckillAllList() {
		this.$axios.get('/seckill/getSeckillList',).then((res) => {
				this.seckillAllList = res.data.data
				// 时间转换
				for(let i = 0;i<this.seckillAllList.length;i++) {
					this.seckillAllList[i].seckillStartDate = parseInt(new Date().getTime() / 1000)
					this.seckillAllList[i].seckillEndDate = parseInt(new Date(this.seckillAllList[i].seckillEndDate).getTime() / 1000)
				}
			})
			.catch(() => {
				this.$message.error('服务器崩溃了，请稍后再尝试使用！')
			})
		},
		// 将秒杀商品结束的时间存入redis
		seckillOverTime() {
			this.$axios.get("/seckill/seckillOverTime")
		}
	},
}
  </script>
<style scoped>
/* 按钮 */
.but {
	float:right;
	width:110px;
	height:40px;
	background: red;
	color: rgb(255, 255, 255);
	border: 1px solid red;
	font-size:16px;
	position: absolute;
	bottom:10px;
	right:10px;
	border-radius: 8px;
}
/* 剩余库存 */
.seckillStock{
	color:gray;
	font-size:16px;
	text-align: center;
	float:left;
	margin-left: 20px;
	position: absolute;
	left: 5px;
	bottom:10px;
}
/* 商品详情 */
.back{
	color:gray;
	font-size:16px;
	margin-top: -10px;
}
/* 商品价格 */
.seckillPrice{
	color:red;
	font-size:16px;
	text-align: center;
	margin-top: -10px;
}
/* 商品名称 */
.commodityName{
	font-size:18px;
	text-align: center;
	clear: both;
}
/* 倒计时 */
.Countdown{
	color:white;
	float:right;
	height:40px;
	background:rgb(248, 150, 150);
	display:line-block;
	line-height: 10px;
}
</style>
    